<template>
  <div class="bigBox">
    <div class="box">
      <div class="headerBox">
        <img src="@/assets/header.jpg">
        <button>上传头像</button>
      </div>
      <div class="infoBox">
        <div class="valueBox">
          <div>用户名:</div>
          <div>Email:</div>
          <div>旧密码:</div>
          <div>新密码:</div>
          <div>确认密码:</div>
        </div>
        <div class="inputBox">
          <input type="text" class="readOnly" v-model="name" readonly>
          <input type="text" class="readOnly" v-model="emiail" readonly>
          <input type="text" v-model="oldPwd">
          <input type="text" v-model="newPwd">
          <input type="text" v-model="confirmPwd">
        </div>
      </div>
      <div class="buttonBox">
        <button @click="modify">提交</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
  name: 'AccountInformation',
  setup(){
    const router = useRouter()
    const store = useStore()
    let AccountInfo = store.state.home.AccountInfo

    const name = ref(AccountInfo.name)
    const emiail = ref(AccountInfo.email)
    const oldPwd = ref('')
    const newPwd = ref('')
    const confirmPwd = ref('')

    // 修改账号密码函数
    function modify(){
      if(AccountInfo.pwd == oldPwd.value){
        if(newPwd.value != confirmPwd.value){
          alert('两次输入新密码不一致')
        }else{
          AccountInfo.pwd = newPwd.value
          alert('点击确认三秒后自动跳转登录页面，请重新登陆')
          setTimeout(()=>{
            router.replace({
              name:'LoginView'
            })
          },3000)
        }
      }else{
        alert('请输入正确的旧密码')
      }
    }

    return {
      name,
      emiail,
      oldPwd,
      newPwd,
      confirmPwd,
      modify
    }
  }
}
</script>

<style scoped>
  .bigBox{
    padding: 20px;
    width: 90%;
    height: 560px;
    margin: 50px auto;
    border-radius: 10px;
    background-color: white;
  }
  .box{
    width: 40%;
    height: 500px;
    margin: auto;
    background-color: white;
  }
  .headerBox{
    width: 100%;
    height: 160px;
  }
  .headerBox>img{
    height: 120px;
    width: 120px;
    border-radius: 60px;
    margin-left: 50%;
    transform: translate(-50%);
  }
  .headerBox>button{
    width: 100px;
    height: 30px;
    background-color: #4BB2FF;
    margin-left: 50%;
    transform: translate(-50%);
    border: none;
    border-radius: 5px;
    color: white;
    margin-top: 5px;
  }
  .infoBox{
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .infoBox>.valueBox{
    width: 25%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .infoBox>.valueBox>div{
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: right;
  }
  .infoBox>.inputBox{
    width: 70%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .infoBox>.inputBox>input{
    width: 80%;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
  }
  .buttonBox{
    width: 100%;
  }
  .buttonBox>button{
    width: 100px;
    height: 30px;
    background-color: #4BB2FF;
    margin-left: 50%;
    transform: translate(-50%);
    border: none;
    border-radius: 5px;
    color: white;
  }
  .readOnly{
    background-color: #efeaea;
    border: none;
  }
</style>